<template>
    <view>
        <view class="topbox">
            <view class="commis">{{ userinfo.Commission || '0' }}</view>
            <view class="titlebox">
                <image class="coinimg"
                    src=" https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406614526516.png"></image>
                <view class="title_1">我的收益</view>
                <!-- <view class="payHuiDouNav" @click="tixbtn">
                    <text lines="1" class="text_4">购买</text>
                </view> -->
            </view>
        </view>
        <view class="navList">
            <view class="navContent">
                <text lines="1" class="text_5" :class="{ navActive: navIndexValue == index }" @click="navIndex(index)"
                    v-for="(item, index) in navMenu" :key="index">{{ item }}</text>
            </view>
        </view>
        <view class="pa_contbox">
            <view class="pa_namebox">
                <view class="name_left">
                    <image class="addreimg"
                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329525852691481.png"></image>
                    <view class="name_til">{{ pa_info.PlaceInfo.PlaceName }}</view>
                    <view class="heat_more"> {{ pa_info.PlaceInfo.Province }} · {{ pa_info.PlaceInfo.City }}</view>
                </view>

            </view>
            <view class="heat_shop_box">
                <view class="detBox">
                    <view class="detailInfo">
                        <view class="detailNum">{{ formatNumber(pa_info.CurrentMonthSaleMoney) }}</view>
                        <view class="detailtext">本月销售额</view>
                    </view>
                </view>
                <view class="detBox">
                    <view class="detailInfo">
                        <view class="detailNum">{{ formatNumber(pa_info.CurrentMonthSaleQty) }}</view>
                        <view class="detailtext">本月销售量</view>
                    </view>
                </view>
                <view class="detBox">
                    <view class="detailInfo">
                        <view class="detailNum">{{ formatNumber(pa_info.TotalSaleMoney) }}</view>
                        <view class="detailtext">累计销售额</view>
                    </view>
                </view>
                <view class="detBox">
                    <view class="detailInfo">
                        <view class="detailNum">{{ formatNumber(pa_info.TotalSaleQty) }}</view>
                        <view class="detailtext">累计销售量</view>
                    </view>
                </view>

            </view>
            <view class="pa_namebox" style="margin-top: 32rpx;">
                <view class="name_left">
                    <image class="addreimg"
                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1741427593376818.png"></image>
                    <view class="name_til">主理人</view>
                    <!-- <view class="heat_more"> {{ pa_info.PlaceInfo.Province }} · {{ pa_info.PlaceInfo.City }}</view> -->
                </view>

            </view>
            <view class="userList">
                <view class="userBox">
                    <view class="userCell" v-for="(item, index) in pa_info.DealerUserList" :key="index">
                        <view class="ucBox">
                            <view class="userImg">
                                <image :src="item.HeadImgUrl" mode="aspectFill" />
                            </view>
                            <view class="userName hiddenText" :class="item.UserID == 0 ?'fakeText':''">{{ item.Name || '虚位以待' }}</view>
                        </view>

                    </view>
                </view>
            </view>

        </view>
        <block v-if="navIndexValue == 0">
            <view class="listbox">
                <block v-if="list.length > 0">
                    <view class="content" v-for="(item, index) in list" :key="index">
                        <view class="leftbox">
                            <view class="sill">{{ item.ProductName || '--' }}</view>
                            <view class="otherInfo">
                                <view class="otherCell"> 规格：{{ item.Style || '--' }}</view>
                                <view class="otherCell"> 数量：{{ item.Qty || '1' }}</view>
                            </view>

                            <view class="time">{{ getTime2(item.OrderTime) }}</view>
                        </view>
                        <view class="rightbox">{{ '+' + item.Price }}</view>
                    </view>
                </block>
                <block v-else>
                    <view style="height:100vh;background-color:white;">
                        <EmptyBox class="nullbox" text="暂无明细"></EmptyBox>
                    </view>
                </block>

            </view>
        </block>
        <block v-if="navIndexValue == 1">
            <view class="listbox">
                <block v-if="list2.length > 0">
                    <view class="content" v-for="(item, index) in list2" :key="index">
                        <view class="leftbox">
                            <view class="sill">{{ item.CommissionType }}</view>
                            <view class="time">{{ getTime2(item.OrderTime) }}</view>
                        </view>
                        <view class="rightbox">{{ '-' + item.Money }}</view>
                    </view>
                </block>
                <block v-else>
                    <view style="height:100vh;background-color:white;">
                        <EmptyBox text="暂无数据"></EmptyBox>
                    </view>
                </block>

            </view>
        </block>


        <uni-popup type="center" ref="signbox" :animation="false">
            <view class="moneybox">
                <view class="moneytext">请输入提现的金额</view>
                <view class="moneycontent">
                    <input type="text" placeholder="请输入金额" v-model="Money" />
                </view>

                <view class="summoneybox">
                    <view class="summoney">{{ '当前总收益为：' }}<text class="sumconmm">{{ (userinfo.Commission ?
                        userinfo.Commission : '0') }}</text></view>
                    <view class="allbtn" @click="Money = userinfo.Commission">提现全部</view>
                </view>
                <view class="confimbtn" @click="Withdrawal">确认提现</view>
                <view class="Tiptext">注：提现金额不能小于10</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            paID: 0,
            navIndexValue: 0,
            PageIndex: 1,
            PageSize: 10,
            userinfo: {},
            list: [],
            Money: 0,
            navMenu: ['本馆收益', '我的收益'],
            list2: [],
            paOrder: [
                {
                    count: 0,
                    name: '上架商品(个)',
                },
                {
                    count: 0,
                    name: '销售数量(个)',
                },
                {
                    count: 0,
                    name: '累计销售(元)',
                },
                {
                    count: 0,
                    name: '人气热度',
                },
                {
                    count: 0,
                    name: '点赞人数',
                },
                {
                    count: 0,
                    name: '粉丝人数',
                },
            ],
            pa_info: {
                PGIProductList: [],
            },
        };
    },
    onLoad(e) {
        this.paID = e?.id;
        this.paDetail();
        this.SaleChannelDetail()
        this.UserCommissionV2()
    },
    onShow() {
        this.UserDepositLogs()
    },
    // 触底事件
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++
            this.UserCommissionV2()

        }
    },
    methods: {
        formatNumber(e) {
            let num = Number(e);
            if (num > 990000) {
                // 将数字转换为“万”单位，并保留一位小数
                const wan = (num / 10000).toFixed(1);
                return `${wan}万`;
            } else {
                // 如果数字小于等于99万，直接返回原数字
                return num.toString();
            }
        },
        async paDetail() {
            let res = await this.$api.post('Dealer/PlaceDealerInfo', {
                PlaceID: this.paID,
            });
            if (res.code == 0) {
                this.pa_info = res.data;
                this.load = true;
            }
        },
        async myDetail() {
            let res = await this.$api.post('Dealer/Info', {
                PlaceID: this.paID,
            });
            if (res.code == 0) {
                this.pa_info = res.data;
                this.load = true;
            }
        },
        async UserDepositLogs() {
            let res = await this.$api.post('SaleChannel/UserDepositLogs')
            if (res.code == 0) {
                this.list2 = this.list2.concat(res.data)
            }

        },
        navIndex(index) {
            this.navIndexValue = index;
            this.PageIndex = 1
            if (index == 0) {
                this.list = []
                this.UserCommissionV2()
            } else {
                this.list2 = []
                this.UserDepositLogs()
            }
        },
        tixbtn() {
            // this.Money = 0
            this.$refs.signbox.open()
        },
        async Withdrawal() {

            if (!Number(this.Money)) {
                this.$pv.msg('请输入正确的数字');
                return;
            }
            if (Number(this.Money) < 10) {
                this.$pv.msg('提现金额不能小于10');
                return;
            }
            if (Number(this.userinfo.Commission) < Number(this.Money)) {
                this.$pv.msg('提现金额不能大于已拥有的收益');
                return;
            }
            let _this = this
            uni.showModal({
                title: "温馨提示",
                content: '您确定要提现' + _this.Money + '元吗？',
                confirmText: "确定",
                success: async function (res) {
                    if (res.confirm) {
                        let res1 = await _this.$api.post('SaleChannel/Deposit', {
                            Money: _this.Money,
                        })
                        if (res1.code == 0) {
                            _this.$pv.msg('提现成功,请耐心等待');
                            _this.Money = 0
                            _this.$refs.signbox.close()
                        } else {
                            this.$pv.msg(res1.message);
                            return;
                        }
                    } else if (res.cancel) {
                    }
                },
            });
        },
        async SaleChannelDetail() {
            let res = await this.$api.post('SaleChannel/SaleChannelDetail')
            if (res.code == 0) {
                this.userinfo = res.data
                // this.Money = 
            }
        },
        async UserCommissionV2() {
            let res = await this.$api.post('Dealer/PlaceOrderList', {
                PageIndex: this.PageIndex,
                PageSize: this.PageSize,
                PlaceID: this.paID
            })
            if (res.code == 0) {
                this.list = this.list.concat(res.data)
            }
            this.isMore =
                Array.isArray(res.data) && res.data.length >= this.PageSize;
        },
        getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            return this.$util.unixDatetime(timestamp, 'yy-ss');
        },
    },
    created() {

    },
}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.navList {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    align-self: center;
    margin-top: 24rpx;
    width: 702rpx;
    display: flex;
    flex-direction: column;
    padding: 24rpx 62rpx 8rpx 54rpx;
    margin: 0 auto;
    margin-bottom: 20rpx;
    box-sizing: border-box;

    .navContent {
        flex-direction: row;
        display: flex;
        justify-content: space-between;

        .text_5 {
            overflow-wrap: break-word;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-family: PingFang-SC-Bold;
            font-weight: normal;
            text-align: right;
            white-space: nowrap;
            line-height: 44rpx;
        }

        .navActive {
            font-weight: bold;

            ::after {
                content: "";
                display: block;
                width: 50rpx;
                height: 10rpx;
                background: #FF6030;
                margin: 0 auto;
                margin-top: 15rpx;
                border-radius: 25rpx;
            }
        }
    }
}

.moneybox {
    width: 550rpx;
    height: fit-content;
    padding: 32rpx 0;
    background-color: #fff;
    border-radius: 32rpx;

    .summoneybox {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30rpx;

        .summoney {
            font-size: 24rpx;
            color: #999999;

            .sumconmm {
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
            }
        }

        .allbtn {
            width: 120rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
            border-radius: 30rpx;
            font-size: 20rpx;
            color: #fff;
            background-color: #FF6030;
        }
    }

    .moneytext {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        text-align: center;
    }

    .moneycontent {
        border: 2rpx solid #E4E4E4;
        width: 70%;
        height: 80rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        padding: 20rpx 0;
        line-height: 1;

        >input {
            font: inherit;
            display: block;
            min-height: 0 !important;
            // height: 100%;
        }
    }

    .confimbtn {
        width: 182rpx;
        min-width: 182rpx;
        height: 64rpx;
        background: #FF6030;
        border-radius: 32rpx;
        text-align: center;
        line-height: 64rpx;
        color: #fff;
        font-size: 28rpx;
        margin: 40rpx auto;
    }

    .Tiptext {
        font-size: 24rpx;
        color: #FC4F45;
        text-align: center;
    }
}

.payHuiDouNav {
    background-color: #FF6030;
    border-radius: 36rpx;
    //   margin-top: 88rpx;
    display: flex;
    flex-direction: column;
    padding: 10rpx 40rpx;
    margin-left: auto;

    .text_4 {
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        font-family: PingFang-SC-Medium;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 40rpx;
    }
}

.topbox {
    width: 702rpx;
    height: 224rpx;
    margin: 14rpx auto;
    // background-image: url('https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720406592968785.png');
    // background-size: cover;
    // background-repeat: no-repeat;
    background: #f78d4c4f;
    border-radius: 16rpx;
    overflow: hidden;
    padding: 32rpx;

    .commis {
        // margin: 32rpx 0 0 32rpx;
        font-size: 72rpx;
        font-weight: bold;
        color: #333333;
    }

    .titlebox {
        display: flex;
        align-items: center;
        // margin-left: 32rpx;
        // width: 85%;

        .coinimg {
            width: 40rpx;
            height: 40rpx;
            margin-right: 8rpx;
        }

        .title_1 {
            font-size: 28rpx;
            color: #333333;
        }
    }
}

.listbox {
    background-color: #fff;
    width: 702rpx;
    margin: 0 auto;
    padding: 32rpx;
    box-sizing: border-box;

    .titlebox {
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;

        .title_2 {
            font-size: 32rpx;
            color: #333333;
            font-weight: bold;
        }

        .leftline {
            width: 6rpx;
            height: 36rpx;
            background: #FF6030;
            border-radius: 4rpx;
            margin-right: 8rpx;
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #E4E4E4;

        .leftbox {

            .sill {
                font-size: 28rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 8rpx;
            }

            .otherInfo {
                display: flex;
                flex-direction: column;

                // align-items: center;
                // justify-content: space-between;
                .otherCell {
                    font-size: 24rpx;
                    color: #666666;
                }
            }

            .time {
                font-size: 24rpx;
                color: #999999;
            }
        }

        .rightbox {
            font-size: 28rpx;
            color: #FF6030;
        }
    }
}

.listbox .content:last-child {
    border-bottom: 0rpx;
    padding-bottom: 0rpx;
}

.pa_contbox {
    width: 702rpx;
    // min-height: 540rpx;
    background: linear-gradient(180deg, #f7d8bf 0%, #ffffff 100%);
    border-radius: 24rpx;
    margin: 0 auto;
    padding: 36rpx 20rpx;

    .pa_namebox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18rpx;

        .btn_titleBox {
            display: flex;
            align-items: center;
        }

        .name_left {
            width: 100%;
            display: flex;
            align-items: center;

            .addreimg {
                width: 40rpx;
                height: 40rpx;
                min-width: 40rpx;
                margin-right: 8rpx;
            }

            .name_til {
                font-size: 28rpx;
                font-weight: bold;
            }

            .heat_more {
                width: fit-content;
                height: 44rpx;
                padding: 0 24rpx;
                background: linear-gradient(90deg, rgba(250, 113, 52, 0.05) 0%, rgba(253, 151, 74, 0.21) 100%);
                border-radius: 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                color: #FF6030;
                margin-left: auto;
            }
        }

        .name_r {
            width: 188rpx;
            height: 56rpx;
            background: #ff6030;
            border-radius: 28rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .zan_icon {
                width: 32rpx;
                height: 32rpx;
            }

            .zan_til {
                font-size: 24rpx;
                font-weight: bold;
                color: #fff;
            }
        }

        .share_btn {
            width: 120rpx;
            margin-left: 18rpx;
            background-color: #52d08e;

            .zan_icon {
                width: 36rpx;
                height: 36rpx;
            }
        }
    }

    .heat_shop_box {
        width: 100%;
        padding: 0 22rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .detBox {
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .detailInfo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .detailNum {
                font-size: 38rpx;
                font-weight: bold;
                color: #ff6030;
            }

            .detailtext {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #666666;
            }
        }

    }

    .userList {
        width: 100%;
        box-sizing: border-box;
        padding: 10rpx 0;

        .userBox {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .userCell {
                width: 20%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10rpx 0;

                .ucBox {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }

                .userImg {
                    width: 48rpx;
                    height: 48rpx;
                    border-radius: 50%;
                    overflow: hidden;

                    >image {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                .userName {
                    width: 100%;
                    font-size: 20rpx;
                    text-align: center;
                    margin-top: 8rpx;
                }
                .fakeText{
                    color: #999999;
                }
            }

        }
    }


}
</style>